<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="UTF-8">
    <title>广告信息</title>
    <script src="/js/jquery-2.1.1.min.js"></script>


    <link rel="stylesheet" href="/js/easyui1.5/themes/icon.css">
    <link rel="stylesheet" href="/js/easyui1.5/themes/default/easyui.css">
    <script src="/js/easyui1.5/jquery.easyui.min.js"></script>

    <link rel="stylesheet" href="/js/uploadify/uploadify.css">
    <script src="/js/uploadify/jquery.uploadify.min.js"></script>

</head>
<script type="text/javascript"  th:inline="none">


    $(function () {
        $('#add_div').dialog('close');
        queryGuangGaoInfo();
        prpeFile();
    })

    function prpeFile(){
//上传插件
        $("#file").uploadify({
            //插件自带  不可忽略的参数
            'swf': '/js/uploadify/uploadify.swf',
            //前台请求后台的url 不可忽略的参数
            'uploader': '/img/addFile',
            //给div的进度条加背景 不可忽略
            'queueID': 'divimg1',
            //上传文件文件名
            'fileObjName' : 'file',//对应后后台接收文件的参数名字
            //给上传按钮设置文字
            'buttonText': '上传图片',
            //设置文件是否自动上传
            'auto': true,
            //可以同时选择多个文件 默认为true  不可忽略
            'multi': false,
            //上传文件的个数，项目中一共可以上传文件的个数
            'uploadLimit':  -1,
            //进度条消失的时间
            'removeTimeout' : 2,
            //开始执行上传
            'onUploadStart':function(files){
                console.log("文件开始上传了")
            },
            //上传失败
            'onUploadError':function(){
                alert("上传失败");
            },
            //不支持flash时调用
            'onFallback':function(){alert('不支持flash')},
            //成功回调函数 file：文件对象。data后台输出数据
            'onUploadSuccess':function(file,data,response){

                //file 上传的文件
                //data 文件上传接口的返回值
                //response  如果有响应就是true
                $("#imga1").prop("src",data)
                $("[name='imgurl']").val(data);
            }
        });
    }

    function queryGuangGaoInfo(){


        $("#dg").datagrid({

            url:'/user/queryGuangGaoInfo',
            striped:true,
            pagination:true,
            toolbar:"#gongneng",
            pageList:[1,2,3,4,5,7,10],
            pageSize:5,
            checkOnSelect:false,
            columns:[[
                {field:'xxx',title:'xx',width:100,checkbox:true,align:'center'},
                {field:'imgurl',title:'广告图片',width:100,align:'center',
                    formatter:function(value,row,index){
                        return "<img width='77' src='"+value+"'>";
                    }
                },
                {field:'gtitle',title:'广告标题',width:100,align:'center'},
                {field:'gstate',title:'广告位置',width:100,align:'center',
                    formatter: function(value,row,index){
                        if(value == 0){
                            return  "右上角";
                        }if(value == 1){
                            return  "左上角";
                        }if(value == 2){
                            return  "左下角";
                        }if(value == 3){
                            return  "右下角";
                        }else{
                            return  "隐藏";
                        }
                    }},


                {field:'aaaa',title:'操作',width:300,align:'center',
                    formatter:function(value,row,index){
                        var content = " <a href='JavaScript:updateGuangGao("+row.id+","+index+")' >修改</a> ";
                         return content;
                    }
                }
            ]]

        })
    }


    function  updateGuangGao(id,index){
        var rows = $('#dg').datagrid('getRows');
        var row = rows[index];
       $("#add_div").dialog('open');

        $('[name="gid"]').val(row.gid);
        $('[name="imgurl"]').val(row.imgurl);
        $('#imga1').prop('src',row.imgurl);

        $('[name="gurl"]').val(row.gurl);
        $('[name="gtitle"]').val(row.gtitle);
        $('[name="gstate"][value="'+row.gstate+'"]').attr("checked","true");

    }


    function setEvent(){

        var rows = $("#dg").datagrid("getChecked");
        var ids = "";
        $.each(rows,function(index,obj){
            ids += ids==""?obj.userId:","+obj.userId;
        });

        if(ids!=null&&ids!=""){
            delUser(ids);
        }


    }

    function updateGGW(){


        $.ajax({
            url:"/user/updateGGW",
            type:"POST",
            data:$("#user-from").serialize(),
            success:function(res){
                $('#add_div').dialog('close');
                queryGuangGaoInfo();

                $.messager.show({
                    title:'消息',
                    msg:'修改通过!!',
                    timeout:5000,
                    showType:'slide'
                });

            },
            error:function(){
                alert("失败了");
            }
        });


    }





</script>


<body>

<div id="gongneng">

</div>
<table id="dg" fit="true"></table>
<div id="add_div"  class="easyui-dialog" title="修改信息" style="width:600px;height:300px"
     data-options="iconCls:'icon-save',resizable:true,modal:true,
			buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					 updateGGW()//调用另一个方法
				}
			},{
				text:'关闭',
				iconCls:'icon-no',
				handler:function(){
				   $('#add_div').dialog('close');
				}
			}]">

    <form id="user-from"><center>
        <input type="hidden"  name="gid">

        <table>
            <tr>
                <td>广告图片</td>
                <td><input name="imgurl">
                    <img id="imga1" width="80">
                    <input id="file" type="file">
                </td>
            </tr>
            <tr>
                <td>广告链接</td>
                <td><input name="gurl"></td>
            </tr>
            <tr>
                <td>广告标题</td>
                <td><input name="gtitle"></td>
            </tr>
            <tr>
                <td>广告位置</td>
                <td><input type="radio" value="0" name="gstate">右上角
                    <input type="radio" value="1" name="gstate">左上角
                    <input type="radio" value="2" name="gstate">左下角
                    <input type="radio" value="3" name="gstate">右下角

                    <input type="radio" value="5" name="gstate">隐藏
                </td>
            </tr>

        </table></center>
    </form>


</div>

</body>
</html>